<template>
	<view class="custom_nav_bar">
		<view class="navigation" :style="{paddingTop:((fixed?statusBar:0) * 2) + 'rpx',backgroundColor: backgroundColor,position: fixed?'fixed':'auto'}">
			<slot name="left_action"></slot>
			<view class="left_btn">
				<image v-if="backIcon" class="back_icon" src="/static/images/left.png" mode="scaleToFill"></image>
				<text v-if="leftText.length>0" class="left_txt" :style="{color: color}">{{leftText }}</text>
			</view>
			<view class="navbar_content" v-if="title.length>0" :style="{top:((fixed?statusBar:0) * 2) + 'rpx',color: color}">
				<text class="navbar_title">{{fixed + title + statusBar}}</text>
			</view>
			<view v-else class="slot_content" :style="{color: color}">
				<slot />
			</view>
			<slot name="right_action"></slot>
			<view class="right_btn" v-if="rightText.length>0">
				<text class="right_txt">{{ rightText}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @Author: NXJ
	 * @property {String} title 导航栏标题
	 * @property {String} backgroundColor 导航栏背景颜色
	 * @property {String} color 图标和文字颜色
	 * @property {String} backIcon 图标和文字颜色
	 * @property {String} leftText 左侧按钮文本
	 * @property {String} rightText 右侧按钮文本
	 * @property {Boolean} fixed = [true|false] 是否固定顶部
	 */
	let _this
	export default {
		name: 'CustomNavBar',
		props: {
			title: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#185AFF'
			},
			color: {
				type: String,
				default: '#FFFFFF'
			},
			backIcon: {
				type: Boolean,
				default: true
			},
			rightText: {
				type: String,
				default: ''
			},
			fixed: {
				type: [Boolean, String],
				default: false
			}
		},
		data() {
			return {
				statusBar: 0,
				customBar: 0
			}
		},
		mounted() {
			_this = this
			if(this.fixed){
				uni.getSystemInfo({
					success: (e) => {
						// #ifdef MP
						_this.statusBar = e.statusBarHeight
						_this.customBar = e.statusBarHeight + 45
						if (e.platform === 'android') {
							// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
							_this.customBar = e.statusBarHeight + 50
						}
						// #endif

						// #ifdef MP-WEIXIN
						_this.statusBar = e.statusBarHeight
						const custom = wx.getMenuButtonBoundingClientRect()
						_this.customBar = custom.bottom + custom.top - e.statusBarHeight
						// #endif

						// #ifdef MP-ALIPAY
						_this.statusBar = e.statusBarHeight
						_this.customBar = e.statusBarHeight + e.titleBarHeight
						// #endif

						// #ifdef APP-PLUS
						_this.statusBar = e.statusBarHeight
						_this.customBar = e.statusBarHeight + 45
						// #endif

						// #ifdef H5
						_this.statusBar = 0
						_this.customBar = e.statusBarHeight + 45
						// #endif
						
						console.log(this.title+_this.statusBar+this.fixed)
					}
				})
			}
		},
		watch: {},
		methods: {
			pageBack() {

			}
		},
		onPageScroll(e) {
			console.log(e)
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-family: "PingFang-SC-Heavy, PingFang-SC";
	}

	.custom_nav_bar {
		position: relative;

		.navigation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: row;
			height: 88rpx;
			// position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
			.content_txt{
				height: 60upx;
				font-size: 32upx;
				line-height: 60upx;
				cursor: none;
				pointer-events: none;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.navbar_content{
				@extend .content_txt;
				position: absolute;
				text-align: center;
				width: calc(100% - 340upx);
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
			}
			.slot_content{
				@extend .content_txt;
				margin: 0 32rpx;
				flex: 1;
			}
			.L_R_btn {
				min-width: 88rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.L_R_btn_txt {
				padding: 0 12rpx;
			}

			.left_btn {
				@extend .L_R_btn;

				&:active {
					background-color: rgba(0, 0, 0, 0.16);
				}

				.left_txt {
					@extend .L_R_btn_txt;
				}

				.back_icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.right_btn{
				@extend .L_R_btn;

				&:active {
					background-color: rgba(0, 0, 0, 0.16);
				}
				
				.right_txt {
					@extend .L_R_btn_txt;
				}
			}
		}


	}
</style>
